<template>
	<div class="activity">
		<h1>活动日历</h1>
		<el-tabs v-model="activeName">
			<el-tab-pane :label="item.date" :name="item.name" v-for="(item,index) in largerVersion" :key="index">
				<div class="tuji1">
					<div class="left">
						<img :src="item.rightExp.imgurl">
					</div>
					<div class="right">
						<div>
							<h4>{{ item.rightExp.time }}</h4>
							<h2>{{ item.rightExp.title }}</h2>
							<h4>{{ item.rightExp.exp }}</h4>
							<el-button>查看详情</el-button>
						</div>
					</div>
				</div>
				<div class="tuji-tow">
					<div class="tow-left">
						<div>
							<h4>{{ item.leftExp.time }}</h4>
							<h2>{{ item.leftExp.title }}</h2>
							<h4>{{ item.leftExp.exp }}</h4>
							<el-button>查看详情</el-button>
						</div>
					</div>
					<div class="tow-right">
						<img :src="item.leftExp.imgurl">
					</div>
				</div>
				<el-row :gutter="20" type="flex" justify="space-between">
					<el-col v-for="(item,index) in item.carImg" :key="index">
						<el-card class="item">
							<img :src="item.imgUrl" class="image">
							<div>
								<h3>{{ item.time }}</h3>
								<h2>{{ item.title }}</h2>
								<p>{{ item.exp }}</p>
								<div class="bottom clearfix">
									<el-button type="info">了解详情</el-button>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				largerVersion: [
					{
						id: 1,
						date: '2020年',
						name: 'first',
						rightExp: {
							imgurl: require('../../../assets/img/t2.png'),
							time: '06.13/2020',
							title: '追600 vs 风动赛车场',
							exp: '追600踏着无数冠军的骑迹，创造自己的奇迹'
						},
						leftExp: {
							imgurl: require('../../../assets/img/t2.png'),
							time: '06.13/2020',
							title: '追600 vs 风动赛车场',
							exp: '追600踏着无数冠军的骑迹，创造自己的奇迹'
						},
						carImg: [
							{
								imgUrl: require('../../../assets/img/lt1.png'),
								time: '04.30/2021',
								title: '见证奇迹，向新疆无人区进发',
								exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
							},
							{
								imgUrl: require('../../../assets/img/lt1.png'),
								time: '04.30/2021',
								title: '见证奇迹，向新疆无人区进发',
								exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
							},
							{
								imgUrl: require('../../../assets/img/lt1.png'),
								time: '04.30/2021',
								title: '见证奇迹，向新疆无人区进发',
								exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
							}
						]
					},
					{
						id: 2,
						date: '2021年',
						name: 'second',
						rightExp: {
							imgurl: require('../../../assets/img/t1.jpg'),
							time: '06.13/2020',
							title: '追600 vs 风动赛车场',
							exp: '追600踏着无数冠军的骑迹，创造自己的奇迹'
						},
						leftExp: {
							imgurl: require('../../../assets/img/t1.jpg'),
							time: '06.13/2020',
							title: '追600 vs 风动赛车场',
							exp: '追600踏着无数冠军的骑迹，创造自己的奇迹'
						},
						carImg: [
							{
								imgUrl: require('../../../assets/img/lt1.png'),
								time: '04.30/2021',
								title: '见证奇迹，向新疆无人区进发',
								exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
							},
							{
								imgUrl: require('../../../assets/img/lt1.png'),
								time: '04.30/2021',
								title: '见证奇迹，向新疆无人区进发',
								exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
							},
							{
								imgUrl: require('../../../assets/img/lt1.png'),
								time: '04.30/2021',
								title: '见证奇迹，向新疆无人区进发',
								exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
							}
						]
					}
				],
				carImg: [
					{   
						id: 1,
						imgUrl: require('../../../assets/img/lt1.png'),
						time: '04.30/2021',
						title: '见证奇迹，向新疆无人区进发',
						exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
					},
					{
						id: 1,
						imgUrl: require('../../../assets/img/lt1.png'),
						time: '04.30/2021',
						title: '见证奇迹，向新疆无人区进发',
						exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
					},
					{
						id: 1,
						imgUrl: require('../../../assets/img/lt1.png'),
						time: '04.30/2021',
						title: '见证奇迹，向新疆无人区进发',
						exp: '面对未知的挑战，与环塔赛车沙海角逐，征途从未停止！'
					},
				]
			}
		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.activity {
		width: 70%;
		margin: 0 auto;
		overflow: hidden;

		h1 {
			text-align: center;
			font-weight: normal;
			color: #000;
			margin: 30px 0;
		}
	}

	.tuji1 {
		height: 430px;
		display: flex;
		position: relative;

		.left {
			width: 68%;
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;

				&:hover {
					transform: scale(1.2);
					transition: all .6s ease-in;
				}
			}
		}

		.right {
			width: 40%;
			background: url(../../../assets/img/calenbj1.png);
			background-size: 100% 100%;
			position: absolute;
			right: 0;
			height: 100%;
			z-index: 10;

			div {
				color: #fff;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				h2,
				h4 {
					margin-bottom: 8%;
				}
			}
		}
	}

	.tuji-tow {
		height: 430px;
		display: flex;
		position: relative;
		margin-top: 25px;

		.tow-left {
			width: 40%;
			background: url(../../../assets/img/calenbj2.png) no-repeat;
			background-size: 100% 100%;
			position: absolute;
			left: 0;
			height: 100%;
			z-index: 10;

			div {
				color: #131313;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				h2,
				h4 {
					margin-bottom: 8%;
				}
			}
		}

		.tow-right {
			width: 68%;
			overflow: hidden;
			margin-left: 32%;

			img {
				width: 100%;
				height: 100%;

				&:hover {
					transform: scale(1.2);
					transition: all .6s ease-in;
				}
			}
		}
	}
	
	.el-row {
		margin-top: 25px;
	}
	.item {
		div {
			h3, h2, p {
				margin: 3% 0;
			}
			h2 {
				
			}
		}
	}
	.image {
		width: 100%;
		height: 100%;
	}
</style>
